<!--
  * 任务进度
  *
-->
<template>
  <default-home-card extra="更多" icon="FireTwoTone" title="本周任务进度" @extraClick="onMore">
    <div class="content-wrapper">
      <a-empty v-if="$lodash.isEmpty(data)" />
      <ul v-else>
        <template v-for="(item, index) in data" :key="index">
          <li class="un-read">
            <a class="content" @click="goDetail(item.id)">
              <a-badge status="geekblue" />
              {{item.name }} 
            </a>  
            <span class="time"> {{ item.taskRate }}%</span>
          </li>
        </template>
      </ul>
    </div>
  </default-home-card>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { taskApi } from '/@/api/task/task-api';
  import DefaultHomeCard from '/@/views/system/home/default-home-card.vue';

  const router = useRouter();

  let data = ref([]);

  const loading = ref(false);
  // 查询列表
  async function queryList() {
    loading.value = true;
    try {
      let queryResult = await taskApi.getWeeklyDataTop10();
      data.value = queryResult.data;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      loading.value = false;
    }
  }

  onMounted(queryList);

  // 查看更多
  function onMore() {
    router.push({
      path: '/tm/weekly',
    });
  }

  // 进入详情
  const modalRef = ref();
  function goDetail(taskId) {
    router.push({
      path: '/tm/task/detail',
      query: { taskId: taskId },
    });
  }
</script>
<style lang="less" scoped>
  .content-wrapper{
    height: 260px;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  ul li {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;

    .content {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }

    .time {
      flex-shrink: 0;
      color: @text-color-secondary;
      min-width: 75px;
    }
  }

  ul li :hover {
    color: @primary-color;
  }

  .un-read a {
    color: @text-color;
  }

  .read a {
    color: @text-color-secondary;
  }
</style>
